<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
       google.load("visualization", "1", {packages:["columnchart"]});
       google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
         data.addColumn('string', 'Year');
         data.addColumn('number', 'Sales');
         data.addColumn('number', 'Expenses');
         data.addRows(5);
         data.setValue(0, 0, '2004');
         data.setValue(0, 1, 1000);
         data.setValue(0, 2, 400);
         data.setValue(1, 0, '2005');
         data.setValue(1, 1, 1170);
         data.setValue(1, 2, 460);
         data.setValue(2, 0, '2006');
         data.setValue(2, 1, 660);
         data.setValue(2, 2, 1120);
         data.setValue(3, 0, '2007');
         data.setValue(3, 1, 1030);
         data.setValue(3, 2, 540);
         data.setValue(4, 0, '2008');
         data.setValue(4, 1, 1030);
         data.setValue(4, 2, 700);

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
         chart.draw(data, {width: 400, height: 240, is3D: true, title: 'www.ivbao.cn'});
       }
    </script>
    <script type="text/javascript">
    
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1', {'packages':['piechart']});
      
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
      
      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create our data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows([
          ['Work', 11],
          ['Eat', 2],
          ['Commute', 2],
          ['Watch TV', 2],
          ['Sleep', 7]
        ]);

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div2'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
      }
    </script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows(4);
        data.setCell(0, 0, 'Mike');
        data.setCell(0, 1, 10000, '$10,000');
        data.setCell(0, 2, true);
        data.setCell(1, 0, 'Jim');
        data.setCell(1, 1, 8000, '$8,000', {style: 'font-style:bold; font-size:22px;'});
        data.setCell(1, 2, false);
        data.setCell(2, 0, 'Alice');
        data.setCell(2, 1, 12500, '$12,500');
        data.setCell(2, 2, true);
        data.setCell(3, 0, 'Bob');
        data.setCell(3, 1, 7000, '$7,000');
        data.setCell(3, 2, true);

        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});
      }
    </script>
  <script type="text/javascript"> 
    google.load('visualization', '1', {packages: ['table']});
    function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('string', 'Email');
  data.addRows(4);
  data.setCell(0, 0, 'John Lennon');
  data.setCell(0, 1, 'john@beatles.co.uk');
  data.setCell(1, 0, 'Paul McCartney');
  data.setCell(1, 1, 'paul@beatles.co.uk');
  data.setCell(2, 0, 'George Harrison');
  data.setCell(2, 1, 'george@beatles.co.uk');
  data.setCell(3, 0, 'Ringo Starr');
  data.setCell(3, 1, 'ringo@beatles.co.uk');
 
  // Create and draw the visualization.
  var table = new google.visualization.Table(document.getElementById('visualization'));
	  
  var formatter = new google.visualization.TablePatternFormat('<a href="mailto:{1}">{0}</a>');
  formatter.format(data, [0, 1]); // Apply formatter and set the formatted value of the first column.
 
  var view = new google.visualization.DataView(data);
  view.setColumns([0]); // Create a view with the first column only.
	  
  table.draw(view, {allowHtml: true, showRowNumber: true});
}
 
    google.setOnLoadCallback(drawVisualization);
  </script>

  </head>

  <body>
    <div id="chart_div"></div>
    <div id="chart_div2"></div>
    <div id="table_div"></div>
    <div id="visualization" style="width: 800px; height: 200px;"></div>
    <div>http://code.google.com/apis/ajax/playground/?type=visualization</div>
  </body>
</html>
